<template>
<div>
<Modal v-model="modalEdit" fullscreen @on-cancel="handleModalEditCancel" 
@on-ok="handleModalEditOK" ok-text="提交">
	<template #header>
		<Icon custom="iconfont icon-Word"/>&nbsp;现场照片及说明&nbsp;
		{{party_name}}&nbsp;涉嫌&nbsp;{{cause_name}}
	</template>
	<div><Row justify="center"><Col span="16"><Form :label-width="80">
		<Button icon="md-add" shape="circle" type="primary" @click="handleAddPhoto">添加图片</Button><br><br>
		<div v-for="(n,i) in baseform"><Card title="现场照片及说明" icon="ios-bookmark">
			<template #extra><Icon type="ios-close-circle-outline" size="24" @click="handleRemovePhoto(i)"/></template>
			<Row>
				<Col span="12"><FormItem label="照片内容" prop="content">
					<Input v-model="baseform[i].content" type="text"/>
				</FormItem></Col>
				<Col span="12"><FormItem label="拍摄地点" prop="location">
					<Input v-model="baseform[i].location" type="text"/>
				</FormItem></Col>
			</Row>
			<Row>
				<Col span="12"><FormItem label="拍摄时间" prop="date1"><Space>
					<DatePicker v-model="baseform[i].date1" type="date" placeholder="选择日期"></DatePicker>
					<TimePicker v-model="baseform[i].time1" format="HH:mm" placeholder="选择时间" />
				</Space></FormItem></Col>
				<Col span="6"><FormItem label="拍摄人" prop="shoter">
				<Select v-model="baseform[i].shoter"  filterable>
					<Option v-for="n in optionsLegal" :value="n.uid"  :key="n.uid">
						<span>{{ n.uname }}</span>
						<span style="float: right;color: #999;">{{ n.uid }}</span>
					</Option>
				</Select>
				</FormItem></Col>
				<Col span="6"><FormItem label="制作人" prop="maker">
					<Select v-model="baseform[i].maker"  filterable>
						<Option v-for="n in optionsLegal" :value="n.uid"  :key="n.uid">
							<span>{{ n.uname }}</span>
							<span style="float: right;color: #999;">{{ n.uid }}</span>
						</Option>
					</Select>
				</FormItem></Col>
			</Row>
			<Row>
				<Col span="24"><FormItem label="图片" prop="photo">
					<Upload :show-upload-list="false" :on-success="handleUpload1Success" 
					:format="['jpg','jpeg','png']" :max-size="20480" type="drag" 
					name="file" style="display: inline-block;width:180px;" :data="{index:i}" 
					:action="uploadActionPhoto">
						<div style="width: 180px;height:120px;line-height: 120px;">
							<Icon type="ios-camera" size="48" v-if="photoArray[i]==null"></Icon>
							<img :src="photoArray[i]" height="120" v-else>
						</div>
					</Upload>
				</FormItem></Col>
			</Row>
		</Card><br></div>
	</Form></Col></Row></div>
</Modal>
</div>
</template>

<script>
import {dateUtils,appendDoc} from '@/libs/tools.js'
import config from '@/config'
export default{
	data(){
		return {
			modalEdit:true,
			party_name:'',
			cause_name:'',
			optionsLegal:[],
			photoArray:[],//照片列表
			baseform:[],
			form:{
				content:'',
				location:'',
				date1:new Date(),
				time1:'',
				photo:''
			}
		}
	},
	computed:{
		uploadActionPhoto(){
			return config.baseUrl+'tangyin/main/mainCase1UploadPhoto.action'
		}
	},
	methods:{
		handleModalEditCancel(){
			this.$router.go(-1)
		},
		handleUpload1Success(res, file, fileList){
			var i=res["index"]
			this.baseform[i].photo=res.photo
			this.photoArray[i]=config.baseUrl+res.photo
		},
		handleRemovePhoto(i){
			this.baseform.splice(i,1)
		},
		handleAddPhoto(){
			var formi={...this.form}
			this.baseform.push(formi)
		},
		handleModalEditOK(){
			let dataArray={...this.baseform}
			for(let i in dataArray){
				dataArray[i]["date1"]=dateUtils.format2(dataArray[i]["date1"])
			}
			dataArray[0].docs=appendDoc(dataArray[0].docs,"doc106")
			var data={data:dataArray}
			console.info(data)
			this.$axios.post('mainCase1CreateDoc106.action',data).then(res=>{
				window.open(config.baseUrl+res.data,'_blank')
			})
			this.$router.go(-1)
		}
	},
	mounted(){
		this.$axios.post("mainCase1GetDoc103Legals.action",{str1:''})
		.then(res=>{
			this.optionsLegal=res.data
		})
		this.$axios.post('mainCase1GetDoc106.action',{
			case_no:this.$route.query.case_no,
			party_type:this.$route.query.party_type
		}).then(res=>{
			this.baseform=res.data
			for(let i in this.baseform){
				dateUtils.dateNotNull(this.baseform[i],"date1")
				if(this.baseform[i].photo==null){
					this.photoArray[i]=null
				}else{
					this.photoArray[i]=config.baseUrl+this.baseform[i].photo
				}
			}
			this.form={...this.baseform[0],...this.form}
			this.party_name=res.data[0]["party_name"]
			this.cause_name=res.data[0]["cause_name"]
		})
	}
}
</script>

<style>
</style>